import { PageContainer } from '@ant-design/pro-components';
import {Typography, Row, Col,Card,Space,Tabs} from 'antd';
import {CaretRightOutlined, EllipsisOutlined} from '@ant-design/icons';
import React from 'react';
import {keyframes} from "antd-style";

// 定义颜色主题、字体等样式变量
const theme = {
  primaryColor: '#1677ff',
  textColor: '#333',
  fontSizeBase: '14px',
  fontFamily: '"Helvetica Neue", Arial, sans-serif',
};

/**
 * 定义平台规范的各个部分
 */
const platformRules = [
  {
    title: '概述',
    items: [
      {
        label: 'E-API平台简介',
        content:
          '1. E-API，作为开放的API管理平台(以下简称本平台)，以其强大的API设计、部署及测试调用功能，成为广大接口开发者的首选工具。该平台以开放为核心，深度整合阿里云FC函数服务，致力于为用户提供高效、稳定的API管理体验。\n2. 本平台提供了一套完善的工具集，帮助用户快速构建出符合业务需求的API接口，满足多样化的开发场景。同时，平台还支持多种数据格式和协议，确保API的兼容性和可扩展性。\n' +
          '3. 本平台凭借其强大的自动化能力，实现了API的快速部署和发布。用户只需简单调试配置，即可将API发布到云端，实现快速上线和迭代。此外，平台还提供了灵活的权限管理和安全策略，确保API的安全性和稳定性。\n' +
          '4. 测试调用是E-API的另一大亮点。平台提供了强大的测试工具，支持对API进行自动化测试和性能调优，确保API的质量和性能达到预期。同时，用户还可以通过平台提供的API文档和调试工具，轻松了解API的使用方法和性能表现。\n' +
          '5. E-API的开放性和易用性也备受开发者社区的赞誉。平台以简洁明了的界面和强大的功能，欢迎各位接口开发者入驻。用户可以在平台上自由发布和分享自己的API，与其他开发者共同学习和进步。\n' +
          'E-API以其高效、易用的特性，以及强大的API管理功能，为广大接口开发者提供了一个优质的工作平台。无论您是初学者还是资深开发者，E-API都将是您不可多得的得力助手。',
      },
      {
        label: '为什么选择E-API？',
        content: [
          <div>
            <p style={{ fontWeight: 'bold', display: 'inline-block' }}>用户友好的界面设计：</p>
            <p style={{ display: 'inline-block' }}>
              本平台提供了清晰直观的操作界面，即使是新手也能快速上手。
            </p>
          </div>,
          <div>
            <p style={{ fontWeight: 'bold', display: 'inline-block' }}>安全性和可靠性：</p>
            <p style={{ display: 'inline-block' }}>
              本平台注重用户数据的安全和隐私保护，确保了平台的可靠性和数据的安全性。
            </p>
          </div>,
          <div>
            <p style={{ fontWeight: 'bold', display: 'inline-block' }}>快速上线和迭代：</p>
            <p style={{ display: 'inline-block' }}>
              本平台深度整合阿里云FC函数服务，支持接口高速部署发布和迭代更新。
            </p>
          </div>,
          <div>
            <p style={{ fontWeight: 'bold', display: 'inline-block' }}>强大的测试功能：</p>
            <p style={{ display: 'inline-block' }}>
              本平台集成接口测试服务，可以在线测试接口性能，以达预期效果。
            </p>
          </div>,
          <div>
            <p style={{ fontWeight: 'bold', display: 'inline-block' }}>舒适的社区环境：</p>
            <p style={{ display: 'inline-block' }}>
              本平台提供接口聊天服务，希望接口作者和用户可以零距离畅谈。
            </p>
          </div>,
        ],
      },
    ],
  },
  {
    title: '秘钥管理',
    items: [
      {
        label: '什么是秘钥',
        content: [
          <div>
            <p style={{ fontWeight: 'bold' }}>什么是秘钥(即accessKey与secretKey)：</p>
            <p style={{ display: 'inline-block' }}>
              本平台为实现安全的接口调用管理，采用APIKEY的鉴权方式，每个用户注册后即可获得专属accessKey与secretKey(请注意，您的秘钥仅限自己使用，切勿泄露给其他人)，在调用平台接口时平台将通过秘钥鉴权(详见接口调用文档)。
            </p>
          </div>,
          <div>
            <p style={{ fontWeight: 'bold' }}>秘钥的获取：</p>
            <p style={{ display: 'inline-block' }}>
              您可以在个人中心(右下角悬浮按钮中)获取平台生成的初始秘钥。
            </p>
          </div>,
        ],
      },
      {
        label: '更换accessKey',
        content:
          '1. 用户可在个人中心(右下角悬浮按钮)随时更换accessKey和secretKey，确保账户安全。\n' +
          '2. 平台将严格保护您的accessKey和secretKey，请勿泄露给其他人。\n' +
          '3. 平台支持accessKey和secretKey的更换，请注意在您更换之后您之前的鉴权将立即失效，请及时更换。',
      },
    ],
  },
  {
    title: '接口调用与计费',
    items: [
      {
        label: '接口调用',
        content: [
          <div style={{ marginBottom: '10px' }}>
            当用户想调取平台API时，首先要获取您的accessKey与secretKey(详见秘钥管理)，在获取秘钥后请使用相应SDK进行调用。
          </div>,
          <p style={{ fontSize: '18px' }}>
            <strong>本平台目前支持以下编程语言的SDK：Java , Python</strong>
          </p>,
          <p style={{ fontWeight: 'bold' }}>前提条件：已开通平台账户并获得API-KEY(详见秘钥管理)</p>,
          <div>
            <p style={{ fontWeight: 'bold', fontSize: '18px' }}>一. Java SDK</p>
            <p style={{ fontWeight: 'bold', fontSize: '16px' }}>1. SDK的安装</p>
            <p style={{ fontWeight: 'bold', fontSize: '15px' }}>
              前提条件：已安装Java8及以上版本。
            </p>
            <a style={{ color: 'black' }}>
              执行以下命令依赖Java SDK，依赖时请将the-latest-version替换为最新版本(
              <strong>Java8及以上版本</strong>)。
            </a>
            <pre
              style={{
                whiteSpace: 'pre-wrap',
                width: '80%',
              }}
            >
              <code className="language-java">
                // Maven <br></br>&lt;dependency&gt;<br></br>{' '}
                &lt;groupId&gt;io.gitee.authority-xi&lt;/groupId&gt;
                <br></br> &lt;artifactId&gt;E-api-SDK&lt;/artifactId&gt;
                <br></br> &lt;version&gt;1.0.1&lt;/version&gt; <br></br>
                &lt;/dependency&gt;
                <br></br>
                <br></br>
                // Gradle<br></br> implementation 'io.gitee.authority-xi:E-api-SDK:1.0.1'
              </code>
            </pre>
          </div>,
          <p style={{ fontWeight: 'bold', fontSize: '16px' }}>2. SDK的使用</p>,
          <p style={{ fontWeight: 'bold', fontSize: '15px' }}>
            前提条件：
            <br></br>
            已开通平台账户并获得API-KEY(详见秘钥管理)。
            <br></br>
            已安装最新版JavaSDK
          </p>,
          <pre
            style={{
              whiteSpace: 'pre-wrap',
              width: '80%',
            }}
          >
            <code>
              // 接口2调用示例（通义千问单轮对话，接口版本更新后我们将发布多轮对话功能） <br></br>
              {`import com.eapi.eapisdk.Eapiclient.Eapiclient;
import com.eapi.eapisdk.Eapiclient.model.InterfaceInfoInvokeRequest;
public static void main(String[] args) {
      // 初始化请求参数 参数：requestParam:对应接口的请求参数,interfaceId:为接口id(Long类型)
      InterfaceInfoInvokeRequest requestParam = new InterfaceInfoInvokeRequest("{\"please give me a number\"}", 2L);
      // 初始化客户端 参数：accessKey,secretKey,requestParam
      Eapiclient eapiclient = new Eapiclient("your_accessKey", "your_secretKey",requestParam);
      // 使用simpleCall()函数进行调用，YOUR_URL为相应接口的URL
      String result = eapiclient.simpleCall(YOUR_URL);
      System.out.println(result);
}`}
            </code>
          </pre>,
          <div>
            <p style={{ fontWeight: 'bold', fontSize: '18px' }}>二. Python SDK</p>

            <p style={{ fontWeight: 'bold', fontSize: '16px' }}>1. SDK的安装</p>
            <p style={{ fontWeight: 'bold', fontSize: '15px' }}>
              前提条件：已安装Python3.8及以上版本。请确保安装正确的Python版本，可能需要pip3 install
              ！
            </p>
            <a style={{ color: 'black' }}>执行以下命令，通过pip安装SDK。</a>
            <pre
              style={{
                whiteSpace: 'pre-wrap',
                width: '60%',
              }}
            >
              <code>pip install EAPI_SDK</code>
            </pre>
            <a style={{ color: 'black' }}>如需更新E-api SDK包，请执行以下命令。</a>
            <pre
              style={{
                whiteSpace: 'pre-wrap',
                width: '60%',
              }}
            >
              <code>pip install EAPI_SDK --upgrade</code>
            </pre>
          </div>,
          <p style={{ fontWeight: 'bold', fontSize: '16px' }}>2. SDK的使用</p>,
          <p style={{ fontWeight: 'bold', fontSize: '15px' }}>
            前提条件：
            <br></br>
            已开通平台账户并获得API-KEY(详见秘钥管理)。
            <br></br>
            已安装最新版PythonSDK
          </p>,
          <pre
            style={{
              whiteSpace: 'pre-wrap',
              width: '80%',
            }}
          >
            <code>
              // 接口3调用示例（百度千帆单轮对话，接口版本更新后我们将发布多轮对话功能） <br></br>
              {`from eapisdk.client import EAPIClient

# 创建默认的客户端
def create_client(access_key, secret_key, base_url):  # baseUrl要改成接口文档中的url
    // 创建客户端 参数：your_accessKey,your_secretKey,url
    client = EAPIClient(access_key, secret_key, base_url)
    // 调用接口 参数：requestParam:对应接口的请求参数,interfaceId:为接口id
    return client.call_api({'question': '奥特曼打得过潇洒哥吗'}, 2)

create_client ("your_accessKey", "your_secretKey",'URL')

`}
            </code>
          </pre>,
        ],
      },
      {
        label: '费用计算',
        content:
          '1. 平台根据接口开发人员设定的价格进行实时计费，确保费用透明合理。\n' +
          '2. 当您首次注册时，平台将赠送100点调用积分，若积分不足请您及时充值。\n',
      },
    ],
  },
  {
    title: '管理员功能',
    items: [
      {
        label: '接口上传与管理',
        content:
          '1. 开通管理员服务后，您可以上传您自己开发的接口。\n' +
          '2. 您上传的接口将自动审核，审核未通过时，将无法修改接口状态，审核通过后，我们会及时通知您，您即可在平台进行调用。\n' +
          '3. 您的接口不得违反任何法律法规，否则将追究您的法律责任，请谨慎上传。\n' +
          '4. 平台强烈建议不要对外暴露接口，避免被恶意调用。恶意调用平台接口将会导致您的账户被封禁。',
      },
      {
        label: '监控接口',
        content:
          '1.管理员可实时查看接口调用情况，包括调用次数、调用时间等统计信息。\n' +
          '2. 您可以根据接口调用情况，及时调整接口定价策略，确保接口价格合理。\n' +
          '3. 平台建议您及时关注接口的评论区，及时和您接口用户沟通，确保接口健康的维护。',
      },
      {
        label: '接口创作',
        content:
          '1. 平台支持接口在线部署，您可以通过上传接口文件直接上传到平台阿里云FC服务。当然，您也可以自行部署接口。\n' +
          '2. 创建接口时，需填写接口名称、接口描述、接口价格、接口参数等详细信息，确保接口的规范性。\n' +
          '3. 您创作的接口需符合OpenAPI规范，平台可以根据接口参数自动生成接口文档，以供用户方便查看和使用。',
      },
      {
        label: '发布管理',
        content:
          '1. 管理员可控制接口的发布状态，轻松上线或下线接口。\n' +
          '2. 您的接口只用通过审核后，才能管理发布和下线状态，审核未通过时，将无法修改接口状态，审核通过后，我们会及时通知您，您即可在平台进行调用。\n' +
          '3. 若您的接口遭到恶意调用，平台将立即下架接口和封禁恶意账户，严格保护您的账户安全，请您接到平台通知后及时检查您的接口，以免造成您的损失。',
      },
    ],
  },
  {
    title: '注意事项',
    items: [
      {
        label: '保管凭证',
        content:
          '1. 平台强烈警告所有用户，请妥善保管您的accessKey和secretKey，秘钥的泄露会给接口作者带来巨大的损失。\n' +
          '2. 建议您定期更换您的accessKey和secretKey，确保账户安全。平台不会自动更换秘钥。',
      },
      {
        label: '安全使用',
        content:
          '1. 在使用平台服务时，请遵守国家法律法规和平台规定，不得进行任何违法、违规活动。\n' +
          '2. 任何违法的调用行为将被禁止使用，平台将第一时间封禁账号被追究违法者的法律责任。',
      },
    ],
  },
  {
    title: '联系我们',
    items: [
      {
        label: '客服支持',
        content: '如有任何问题或需要帮助，请联系我们的客服团队，我们将竭诚为您服务。',
      },
      { label: '联系方式', content: '您可以通过以下方式联系我们:3157115439@qq.com' },
    ],
  },
  {
    title: '版权与免责声明',
    items: [
      {
        label: '版权信息',
        content: '本平台提供的所有接口和服务均受版权法保护，未经许可，不得擅自使用、复制或传播。',
      },
      {
        label: '免责条款',
        content: '对于因用户不当使用或第三方原因导致的任何损失或损害，本平台不承担任何责任。',
      },
    ],
  },
];
const fadeIn = keyframes`
    from {
        opacity: 0; /* 初始完全透明 */
    }
    to {
        opacity: 1; /* 结束完全不透明 */
    }
`;
/**
 * PlatformRule 组件用于展示开放API平台的规范和使用方法
 * @returns
 */
const PlatformRule: React.FC = () => {
  return (
    <PageContainer style={{animation: `${fadeIn} 1s ease-in-out`}}>
      <Typography.Title level={2} style={{ color: theme.primaryColor, alignItems: 'center' }}>平台规范</Typography.Title>
      <Row gutter={[16, 16]}>
        {platformRules.map((rule, index) => (
          <Col span={24} key={index}>
            <Card
              hoverable='true'
              type='inner'
              bordered={false}
              title={
                <Space align="center">
                  <CaretRightOutlined style={{ color: theme.primaryColor,marginTop:10 }} />
                  <Typography.Title level={4} style={{ color: theme.primaryColor,marginTop:10 }}>{rule.title}</Typography.Title>
                </Space>
              }

            >
              <Tabs type={"line"} defaultActiveKey="1" animated={true} moreIcon={<EllipsisOutlined />}>
                {rule.items.map((item, itemIndex) => (
                  <Tabs.TabPane  tab={<a style={{color:theme.textColor,fontSize:'16px',fontWeight:'bold'}}>{item.label}</a>} key={String(itemIndex + 1)}>
                    <Typography.Paragraph style={{ fontSize: 16, color: theme.textColor,whiteSpace:'pre-wrap' }}>
                     <p style={{lineHeight:'2em'}}>{item.content}</p>
                    </Typography.Paragraph>
                  </Tabs.TabPane>
                ))}
              </Tabs>
            </Card>
          </Col>
        ))}
      </Row>
    </PageContainer>
  );
};

export default PlatformRule;
